<template>
  <div>
    <van-pull-refresh v-model="isLoading" @refresh="onRefresh">
      <!-- 顶部 -->
      <van-sticky offset-top="-3">
        <div class="row-item row-main padding-16">
          <h1 class="demo">购物车</h1>
          <p class="demo float-rig">
            <transition name="van-slide-down">
              <van-icon
                size="32"
                color="#EF6C00"
                :badge="result.length"
                v-if="result.length"
                name="balance-o"
                style="margin-right: 6px"
                @click.stop="goPay"
              />
            </transition>
            <van-icon size="36" name="todo-list-o" />
          </p>
        </div>
      </van-sticky>
      <van-checkbox-group class="borderBox" v-model="result">
        <!-- <div
          class="dragNav"
          id="moveDiv"
          @touchstart="down"
          @mousemove="move"
          @touchmove.prevent="move"
          @mouseup="end"
          @touchend="end"
        ></div> -->
        <van-cell-group inset class="mar-3" v-for="i in 6" :key="i">
          <van-cell style="position: relative">
            <van-checkbox :name="i" checked-color="#DCE775">
              <van-card
                price="22.00"
                desc="相信你会爱上这个恰好的味道"
                title="美式咖啡"
                thumb="https://www.luckincoffee.com/template/images/tea/product_wheel_coffee_main_new.jpg"
              />
            </van-checkbox>
            <van-stepper
              class="floatStepper"
              v-model="value"
              integer
              theme="round"
              button-size="22"
              disable-input
              @change="change"
            />
          </van-cell>
        </van-cell-group>
      </van-checkbox-group>
      <van-divider>已展示全部</van-divider>
    </van-pull-refresh>
  </div>
</template>

<script>
export default {
  name: "ShopCart",
  data() {
    return {
      isLoading: false,
      result: [],
      position: { x: 0, y: 0 },
      nx: "",
      ny: "",
      dx: "",
      dy: "",
      xPum: "",
      yPum: "",
      windWidth: 0,
      windHeight: 0,
      value: 0,
    };
  },
  mounted() {
    this.windWidth = document.body.clientWidth;
    this.windHeight = document.body.clientHeight;
  },
  methods: {
    onRefresh() {
      this.isLoading = true;
      setTimeout(() => {
        this.isLoading = false;
      }, 1000);
    },
    // 实现移动端拖拽
    down(event) {
      this.flags = true;
      var touch;
      if (event.touches) {
        touch = event.touches[0];
      } else {
        touch = event;
      }
      this.position.x = touch.clientX;
      this.position.y = touch.clientY;
      this.dx = moveDiv.offsetLeft;
      this.dy = moveDiv.offsetTop;
    },
    move(event) {
      if (this.flags) {
        var touch;
        if (event.touches) {
          touch = event.touches[0];
        } else {
          touch = event;
        }
        this.nx = touch.clientX - this.position.x;
        this.ny = touch.clientY - this.position.y;
        this.xPum = this.dx + this.nx;
        this.yPum = this.dy + this.ny;
        moveDiv.style.left = this.xPum + "px";
        moveDiv.style.top = this.yPum + "px";
        //阻止页面的滑动默认事件；如果碰到滑动问题，1.2 请注意是否获取到 touchmove
        // document.addEventListener(
        //   "touchmove",
        //   function (event) {
        //     event.preventDefault();
        //   },
        //   false
        // );
      }
    },
    //鼠标释放时候的函数
    end() {
      this.flags = false;
    },
    change() {},
    // 到达顶单页
    goPay() {
      this.$router.push({
        path: "/pay",
        query: {},
      });
    },
  },
};
</script>

<style scoped>
.van-card {
  background-color: none;
}
.dragNav {
  width: 6.25rem;
  height: 6.25rem;
  background-color: yellow;
  position: absolute;
  z-index: 333;
}
.floatStepper {
  position: absolute;
  bottom: 0.1875rem;
  right: 0.1875rem;
}
</style>